<template>
  <AssociatedApproval
    ref="associatedApprovalRef"
    :is-edit="!isDetail"
    :exclude-id="excludeId"
    :module-id="-1"
    :show-modal="false"
    :element="element"
    :title="element.name"
    :tip-text="element.options.tip"
    :is-required="(element.options.required || !!(requiredKeys && requiredKeys.includes(element.key)))"
    :exclude-types="getExcludeTypes()"
    is-custom
    style="margin-bottom: 12px"
    @approvalListChange="approvalListChange"
  />
</template>

<script>
import AssociatedApproval from '@/views/reimbursement/module/associatedApproval';
export default {
  name: 'BanAssociatedContent',
  components: {
    AssociatedApproval
  },
  model: {
    prop: 'listData',
    event: 'changeData'
  },
  props: {
    listData: { // 只存储ids, 接口获取的值为数组
      type: String | Array,
      default: ''
    },
    element: {
      type: Object,
      default: null
    },
    isDetail: { // 是否详情页展示
      type: Boolean,
      default: false
    },
    needSetData: { // 是否详情页展示
      type: Boolean,
      default: false
    },
    requiredKeys: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      excludeId: '',
      isInitAssign: false
    };
  },
  watch: {
    listData: {
      handler(data) {
        if (Array.isArray(data) && (!this.isInitAssign || this.needSetData)) {
          this.$nextTick(() => {
            this.$refs['associatedApprovalRef'].setTableData(_.cloneDeep(this.listData));
          });
        }
        this.isInitAssign = true;
      },
      immediate: true
    }
  },
  created() {
    const { id } = this.$route.query;
    id && (this.excludeId = Number(id));
  },
  methods: {
    getExcludeTypes() {
      if (this.element && this.element.options && this.element.options.banForms) {
        return this.element.options.banForms.map(item => item.workFlowId).join();
      }
      return '';
    },
    approvalListChange(list) {
      if (Array.isArray(list) && list.length) {
        const ids = list.map(item => item.id).join();
        this.$emit('changeData', ids);
        this.$emit('setListData', list);
      } else {
        this.$emit('changeData', '');
      }
    }
  }
};
</script>

<style scoped>

</style>
